<template>
  <div>
    这是其他页面

    <h1>vuex中的值{{ count }}</h1>

    <h1>用户信息</h1>
    <p>Name: {{ userInfo.name }}</p>
    <p>Age: {{ userInfo.age }}</p>
    <p>Email: {{ userInfo.email }}</p>
    <button @click="debouncedFetchUserInfo">点击获取数据</button>
    <button @click="error">点击模拟错误接口</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { error, error111, getData } from '@/utils/api'
import { debounce } from 'lodash'
export default {
  name: 'HelloWorld',
  data() {
    return {
      userInfo: {},
    }
  },
  computed: {
    // 使用 mapState 将 Vuex 状态映射到组件的计算属性
    ...mapState(['count']),
  },
  methods: {
    async fetchUserInfo() {
      const res = await getData()

      if (res.code === 0) {
        this.userInfo = res.data
      }
    },

    // 防抖处理
    debouncedFetchUserInfo: debounce(function () {
      this.fetchUserInfo()
    }, 500), // 防抖时间设置为500毫秒

    // 这个返回code=10
    async error() {
      await error()
    },

    // 这个node没有设置接口
    async error111() {
      await error111()
    },
  },
}
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>

